<template>
  <div class="rounded-xl text-white p-3 flex justify-between bg-gray-200/40 mb-3">
    <div class="flex-1">
      <div>全部代收总额：<span class="text-red-500"></span></div>
      <div>全部代收总数：<span class="text-red-500"></span></div>
      <div>全部代收佣金：<span class="text-red-500"></span></div>
    </div>
    <div class="flex-1">
      <div>全部代付总额：<span class="text-red-500"></span></div>
      <div>全部代付总数：<span class="text-red-500"></span></div>
      <div>全部代付佣金：<span class="text-red-500"></span></div>
    </div>
  </div>

  <van-list @load="LoadData" :finished="finished" :finished-text="'没有更多了'" :loading="loading">
    <div :key="index" v-for="(item, index) in list" class="border mb-2 rounded p-1 py-2 bg-white">
      <div class="flex justify-between border-b mb-3 text-sm">
        <div class="flex-1">下级账号：{{ item.username }}</div>
        <div>更新时间：{{ dayjs(item.update_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</div>
      </div>

      <div class="flex justify-between text-sm">
        <div>成功收款总额：{{ item.totalOrderAmount }}</div>
        <div>成功收款笔数：{{ item.totalOrderCount }}</div>
      </div>
      <div class="flex justify-between text-sm">
        <div>代理总返佣金：{{ item.rebate }}</div>
        <div>我抽成总佣金：{{ item.myCommission }}</div>
      </div>

      <div class="flex justify-between mt-3 text-sm">
        <div>成功代付总额：</div>
        <div>成功代付笔数：</div>
      </div>
      <div class="flex justify-between text-sm">
        <div>代理总返佣金：</div>
        <div>我抽成总佣金：</div>
      </div>
    </div>
  </van-list>
</template>
<script setup lang="ts">
import { GetCountInfoApi } from '@/apis/group'
import { ref } from 'vue'
import dayjs from 'dayjs'

const page = ref(1)
const loading = ref(false)
const finished = ref(false)
const info = ref({})
const list = ref([])

function LoadData() {
  if (loading.value) return
  loading.value = true
  GetCountInfoApi({ page: page.value })
    .then((res) => {
      info.value = res
      if (res.list.length > 0) {
        page.value++
        list.value.push(...res.list)
      } else {
        finished.value = true
      }
    })
    .finally(() => {
      loading.value = false
    })
}
</script>
